<!DOCTYPE html>
<html lang="en">


{"test1":".45,.45,.3,1","test2":"0,0,1,1","test3":".42,0,1,1","test4":"0,0,.58,1","ease-in-out":".42,0,.58,1"}
<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动画速度曲线 | 设置动画步长</title>
    <style>
        div {
            width: 0px;
            height: 30px;
            /* 行高 = 高度 -> 垂直居中 */
            line-height: 30px;
            /* background-color: pink; */
            /* 设置动画属性 */
            animation: progress 4s steps(10,start) forwards;
            /* 文字大小设置为 20 像素 , 正好 10 个字 200 像素 */
            font-size: 20px;
            /* 强制令文字显示在一行 */
            white-space: nowrap;
            /* 隐藏盒子模型边界外的内容 */
            overflow: hidden;
        }
        
        @keyframes progress {
            /* 设置动画节点 */
            0% {
                /* 开始时盒子模型宽度 0 */
                width: 0;
            }
            100% {
                /* 执行结束后盒子模型宽度 200 */
                width: 200px;
            }
        }
    </style>
</head>

<body>
    <div>实现一个打字机效果吧</div>
</body>

</html>
